---
import BaseHead from '@/components/BaseHead.astro';
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.astro';
import ScrollTop from '@/components/ScrollTop';
import { SITE_TITLE, SITE_DESCRIPTION } from '@/config';
import Music from '@/components/Music';
import SearchPopup from '@/components/SearchPopup.vue';
import { DocItem, generate } from '@/utils/generateDocTree';

export interface Props {
	fullscreen?: boolean;
}

const { fullscreen } = Astro.props as Props;

const blogs = await Astro.glob<DocItem>('../pages/blog/**/*.{md,mdx}');
const { tree, total, list } = generate(blogs);
---

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
	</head>
	<body>
		<main class={ `main${fullscreen ? '-full' : ''}` }>
      <div class={ `header${fullscreen ? '-full' : ''}` }>
    		<Header client:only="vue" title={SITE_TITLE} />
        <slot name="header" />
      </div>
      <ScrollTop client:only="vue" />
      <Music client:only="vue" />

      <SearchPopup client:only="vue" total={total} tree={tree} list={list} />

      <script>
        document.addEventListener('keydown', (e) => {
          // ctrl + k 快速搜索
          if (e.ctrlKey && e.key.toLocaleLowerCase() === 'k') {
            e.preventDefault();
            document.body.dispatchEvent(new CustomEvent('young:trigger-search'));
          }
        });

        document.body.addEventListener('young:trigger-search', () => {
          const el = document.querySelector('#search-popup');
          el && el.classList.remove('hidden');

          const inputEl = document.querySelector('#search-popup > div > div.n-dialog__content.n-dialog__content--last > div > div > div > div > div > div > div > div:nth-child(2) > div > div > div.n-base-selection-label > input') as HTMLInputElement;
          inputEl.click();
        });

        document.body.addEventListener('young:hide-search', () => {
          const el = document.querySelector('#search-popup');
          el && el.classList.add('hidden');
        });
      </script>

      <div id="main-content" class={fullscreen ? '' : 'bg-[#f5f5f5]'}>
        <slot />
      </div>
		</main>
		<Footer />
	</body>
</html>

<style lang="scss">
.main {
  @apply text-gray-800 dark:text-purple-500;
}

.main-full {
  @apply text-gray-50 dark:text-purple-500;
}

.header {
  background-attachment: fixed;
  @apply w-full transition-all duration-500 h-68px shadow;
}

.header-full {
  background-image: url('/img/poster-filter.png'), linear-gradient(60deg, rgba(255, 165, 150, 0.5) -6%, rgba(0, 228, 255, 0.35)), url('/img/goldenmeili.png');
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #49b1f5;
  background-position: center;
  @apply w-full h-100vh transition-all duration-500;
}

#main-content {
  @apply w-full mx-auto min-h-100vh relative text-gray-800 dark:text-purple-500 flex;
}
</style>